מיקום בעזרת CSS2

תכונות מיקום

בחנו את התמונה הרחבה, ואת התאוריה, כעת נעיף מבט פרטני ונלמד כיצד לממש את מה שעליו דיברנו. בחלק זה אנו נבחן את כל אחת מתכונות ה-CSS2.

'מיקום'

- מה הוא עושה?

תכונת המיקום המיקום מגדירה כיצד יש למקם אלמנט כלשהו. בחלק העליון, ראינו כי קיימים 4 סוגים של מיקום: סטאטי, מוחלט, קבוע ויחסי. עבור יותר פרטים בנוגע לכל אחד מאלה בנושא מיקום - ראו דף הקודם.

ערכיי ברירת מחדל

אם לא הוגדר מיקום עבור אלמנט מסוים, הוא יקבל מיקום סטאטי.

האם זה עובר בירושה?

המיקום אינו עובר בירושה, ואולם, זכרו כי מיקום אלמנט הורה יכול להשפיע על המיקום של הילדים שלו.

'שמאל'

מה זה עושה?

מגדיר היכן הצד השמאלי של אלמנט כלשהו אמור להיות ממוקם.

אם האלמנט הוא בעל מיקום סטאטי, לתכונה זו אין כל השפעה.

אם אלמנט כלשהו הוא בעל מיקום יחסי, אזי תכונה זו מגדירה היכן אמור האלמנט להיות ממוקם, בהתחשב היכן הוא אמור להיות ממוקם, מבחינה סטאטית. לדוגמא,

H1 {position: relative; left: 10%}

ממקם את הצד השמאלי של כותרות מרמה 1 10% מרוחב האלמנט ההורה לימין מהמיקום המקורי שלהן.

אם אלמנט כלשהו הוא בעל מיקום מוחלט, תכונה זו מגדירה היכן אמור הצד השמאלי של האלמנט להיות, בהתחשב בצד השמאלי של אלמנט ההורה.

אם אלמנט הוא בעל מיקום קבוע, הוא מגדיר את הצד השמאלי בהתחשב בקצה השמאלי של החלון.

ערכים אפשריים

ניתן להגדיר את השמאל כ:

• אחוז
• ערך יחידה
• ע"י מילת המפתח auto

ערכים אחוזיים מתכוונים לאחוז של רוחב האלמנט ההורה.

auto - מתכוון למיקום הנוכחי של אלמנט כלשהו.

ערכיי ברירת מחדל

אם לא מוגדר מהו שמאל עבור אלמנט מסוים, ערך ברירת המחדל הוא auto.

האם זה עובר בירושה?

שמאל - אינו עובר בירושה, אך שמאלו של אלמנט מסוים יכול להיות מושפע מהמיקום של האלמנט ההורה שלו.

'עליון'

מה הוא עושה?

הוא מגדיר היכן הצד העליון של אלמנט כלשהו אמור להיות ממוקם

אם יש לאלמנט מיקום סטאטי, אז למאפיין זה אין השפעה.

אם לאלמנט יש מיקום יחסי, אזי מאפיין זה מגדיר היכן האלמנט צריך להיות ממוקם ביחס להיכן הוא ימוקם באופן סטאטי

אם לאלמנט יש מיקום מוחלט, אז מאפיין זה מגדיר היכן הצד העליון של האלמנט צריך להיות ביחס לצד העליון של אלמנט ההורה.

אם האלמנט הוא בעל מיקום קבוע, מאפיין זה מגדיר את הצד העליון ביחס לקצה העליון של החלון.

ערכים אפשריים

ניתן להגדיר 'עליון' כ:

• אחוז
• ערך יחידה
• ע"י מילת המפתח auto

ערכיי אחוז מתייחסים לאחוז זה של גובה אלמנט ההורה.

auto - מתייחס למיקום הנוכחי של אלמנט כלשהו.

ערכים של ברירת מחדל

אם לא מוגדר חלק עליון עבור אלמנט מסוים, ערך ברירת המחדל נקבע ל-auto.

האם זה עובר בירושה?

'עליון'- אינו עובר בירושה, אך החלק העליון של אלמנט כלשהו יכול להיות מושפע מן המיקום של אלמנט ההורה שלו.

'רוחב'

מה הוא עושה?

מאפיין זה מגדיר את הרוחב של אלמנט מסוים. ניתן ליישם אותו על אלמנטים של גוש, אלמנטים מוחלפים (אלמנטים, כמו IMG-ים) ועל כל אלמנט בעל מיקום מוחלט או קבוע.

ערכים אפשריים

ניתן להגדיר את הרוחב כ:

• אחוז
• ערך יחידה
• ע"י מילת המפתח auto

ערכיי אחוז מתייחסים לרוחב של אלמנט ההורה.

ערכיי יחידה (כמו פיקסלים ו-ems) מאפשרים הגדרת רוחב בשימוש בערכים עם יחידות אלה.

רוחב של auto ממקם את הקצה הימני של האלמנט מיד בתוך הקצה הימני הפנימי של אלמנט ההורה שלו.

ערכים של ברירת מחדל

אם לא מוגדרים כל ערכים שהם עבור רוחב, הערך של ברירת המחדל הוא auto.

האם זה עובר בירושה?

רוחב אינו עובר בירושה מאלמנט ההורה.

'גובה'

מה הוא עושה?

מאפיין זה מגדיר גובה של אלמנט מסוים. ניתן ליישם אותו על אלמנטים של גוש, אלמנטים מוחלפים (אלמנטים כמו IMG-ים) ועל כל אלמנט בעל מיקום מוחלט או קבוע.

ערכים אפשריים

ניתן להגדיר גובה כ:

• אחוז
• ערך יחידה

  ערכיי אחוז מתייחסים לגובה של אלמנט ההורה.

ערכיי יחידה (כמו: פיקסלים ו-ems) מאפשרים להגדיר גובה בשימוש בערכים עם יחידות אלה.

ערכים של ברירת מחדל

אם לא מוגדרים אלו ערכים שהם עבור גובה , ערך ברירת המחדל הוא auto.

האם זה עובר בירושה?

גובה - אינו עובר בירושה מאלמנט ההורה.

'גלישה'

מה היא עושה?

מכיוון שניתן להגדיר גובה ורוחב, אנו נתקלים בבעיה הפוטנציאלית שתוכן אלמנט כלשהו לא יתאים לאזור שלו. מה יש לעשות? אם אתם מכירים כבר מסגרות, אולי תוכלו לנחש.

מאפיין הגלישה מאפשר לכם להגדיר מה קורה במצב זה. ניתן לחתוך, לגרום גלישה או לצייר פסי גלילה של תוכן שלא מתאים לתוך האזור, כדי להתאים את התוכן, כמו שזה קורה עם מסגרות.

ערכים אפשריים

ניתן להגדיר 'גלישה' כאחת מתוך :

נראה לעין

- מגדיר שרוחב או גובה של אלמנט כלשהו צריך להיות מותאם על מנת להתאים את התוכן הלא מתאים אל תוך האזור המקורי של האלמנט.

מוסתר

- מגדיר שהתוכן צריך להיות 'חתוך' לגובה ולרוחב של האלמנט. כל דבר שאינו מתאים לתוך אזור זה הוא אינו נראה לעין.

גלילה

זה מגדיר שפסי גלילה תמיד צריכים להופיע על האלמנט ואין זה קשור אם הם הכרחיים.

auto

מגדיר שצריך לצייר פסי גלילה רק כאשר גלילה היא הכרחית על מנת להתאים את התוכן הלא מתאים לתוך הממדים של האלמנט.

ערכים של ברירת מחדל

אם לא מוגדרים כל ערכים עבור גלישה ברירת המחדל היא נראה לעין.

האם זה עובר בירושה?

הגלישה של אלמנט כלשהו אינה עוברת בירושה מן ההורה שלו.

רמזים והצעות

כמו דברים רבים בתוך CSS2, היישום של מאפיין זה בתוך הדפדפנים העיקריים (Netscape 4,4.5 ו- Internet Explorer 4,4.5,5) הוא חלש. אל תסתמכו על כך שזה יעבוד לכם.

מפתח-Z

- מה הוא עושה?

כעת כשניתן למקם אלמנטים בכל מקום על הדף, מה קורה כאשר הם עולים האחד על השני? איזה מתוך שתי אלמנטים או יותר מערפל את האחרים? מאפיין מפתח ה-Z מאפשר לנו להגדיר זאת.

ערכים אפשריים

ניתן להגדיר את מפתח Z או כמילת מפתח auto, או ע"י שימוש במספר שלם.

מפתח Z של auto מגדיר כי אלמנט כלשהו אמור להיות מוערם בדף באותו הסדר שבו מופיע במקור ה-HTML.

לדוגמה: עם פסקאות אלה

<P>This is the first paragraph</P>

<P>This is the second paragraph</P>

הפסקה השניה קרובה יותר לקדמת הדף מאשר הפסקה הראשונה. אם מכל סיבה שהיא פסקאות אלה עולות האחת על השניה, הפסקה השניה הייתה מערפלת את הראשונה. זה עלול לקרות עם כלל דף הסגנון הבא :

P {position: absolute; left: 10px; right 10px}

למרות שאני לא בטוח .מדוע יופיע לכם כלל זה?

כאשר מפתח Z מוגדר בעזרת מספר שלם, ככל שהמספר גבוה יותר, כך הוא קרוב יותר לקדמת הדף.

למרות שקיימים מספר גורמים מסבכים לא ניתן ליישם מפתחות z על כל הדף, אלא רק במסגרת היררכיה מסוימת. פירושו של דבר, שמפתח z של אלמנטים הורים הוא חשוב בהחלטה על איזה אלמנט מערפל את האחר. הבה ננסה דוגמא:

נניח שיש לכם דמות הממוקמת באופן מוחלט, יחד עם מפתח z של 10 בתוך פיסקה של מפתח z 1, ודמות של מפתח z 2 בפסקה אחרת, של מפתח z 5. אם שתי הדמויות עולות אחת על השנייה, איזו מהן מערפלת את האחרת?במקרה זה זו תהיה הדמות בעלת מפתח z הנמוך יותר, מכיוון שלפסקת ההורה שלה יש את מפתח z הגבוה יותר. כך שהפסקה עם מפתח z הגבוה יותר מערפלת את הפסקה בעלת מפתח z הנמוך יותר, וכתוצאה מכך, תוכן הפסקה בעלת מפתח z גבוה יותר מערפל את התוכן של הפסקה בעלת מפתח z הנמוך יותר, ללא קשר למפתחות ה-z של התוכן.

גם אם זה קצת מסבך את העניינים, זה עדיין הגיוני.

היבט עדין נוסף הוא השאלה כיצד לעשות את התוכן של אלמנט מסוים קרוב יותר לקדמת הדף, או רחוק יותר מקדמת הדף, מאשר האלמנט עצמו. כאשר מפתח ה-z של אלמנט כלשהו הוא פחות מאפס, אלמנט ההורה קרוב יותר לקדמת הדף, כאשר מפתח ה-z של אלמנט כלשהו הוא יותר מאפס, האלמנט קרוב יותר לקדמת הדף.

אני מקווה שזה ברור לכם כעת.

ערכיי ברירת מחדל

ע"י ברירת מחדל, מפתח ה-z הוא auto.

האם זה עובר בירושה?

כאשר מפתח ה-z אינו עובר בירושה, הדיון למעלה מסביר כיצד מפתח ה-z של אלמנט הורה מסוים קשור לאלמנט ולסדר המערום שלו.

'ראות' (visibility)

מה היא עושה?

הראות מאפשרת לכם להגדיר האם אלמנט כלשהו הוא נראה לעין או לא. אתם עלולים לתהות מדוע מישהו ירצה שהאלמנט שלו יהיה נסתר מן העין, אך זכרו כי דפי האתר הם דינמיים, כך שהמצב שלהם יכול להשתנות כל הזמן, או להיות תלויים באינטראקציית המשתמש. הרבה מן הטריקים הנוכחיים של DHTML עושים קצת יותר מאשר לתמרן את הראות של אלמנטים בדף האתר.

ערכים אפשריים

ראות יכולה לקבל ערך 1 מתוך 3 ערכים:

נראה לעין - כמו שניחשתם, הוא מגדיר כי אלמנט כלשהו צריך להיות נראה לעין.

מוסתר - גם הוא צריך להיות ברור; הוא מגדיר כי אלמנט כלשהו צריך להיות נסתר מן העין. זכרו כי ייתכן והאלמנט לא יהיה גלוי, אך נוכחותו עדיין תורגש באופן הדף המובנה. הדפדפן עדיין מאפשר מרווח עבור האלמנט (אחרי הכל, הוא אכן נמצא שם), רק שהתוכן הוא נסתר מן העין. אם תרצו שאלמנט כלשהו יהיה נוכח במקור, אך נוכחותו נעלמה לחלוטין, תקבעו את התצוגה ל-none (לדוגמא, P {display:none}).

ירושה

אם תרצו כי לאלמנט כלשהו תהיה את אותה הראות כמו לאלמנט המכיל אותו, אז תקבעו את הראות לירושה.

ערכים של ברירת מחדל

אם לא נקבעה כל ראות, אזי לאלמנט מסוים יש את הראות של הירושה.

האם זה עובר בירושה?

כפי שכבר ראינו, ראות יכולה לעבור בירושה. ע"י ברירת המחדל, היא כן עוברת בירושה.

'חיתוך'-(clip)

- מה הוא עושה?

חיתוך הוא מונח תכנות טכני שככל הנראה יזכה בשימוש רחב יותר, בדיוק כמו המונח רנדור (render), במשך השנים הבאות.

חשבו על גרפיקה מסוימת שגדולה יותר מחלון הדפדפן שדרכו אתם צופים בה. האם היא עדיין נשפכת מחוץ לחלון? לא אם הדפדפן מפותח היטב. הדמות חתוכה למסגרת החלון (באופן טכני למסגרת של אזור הצפייה, שהיא תכניי החלון).

בעזרת CSS2 ניתן להגדיר את הממדים של אלמנט מסוים שצריך להיות גלוי לעין, והאלמנט הוא חתוך למלבן זה

ערכים אפשריים

החיתוך מוגדר כמלבן, עם כל קצה של המלבן (עליון, תחתון, שמאלי, ימיני) מוגדר או כערך אורך או ע"י מילת המפתח auto.

באופן חלופי, ניתן להגדיר את החיתוך כ-auto, שפירושו, בהכרח, שהאלמנט אינו צריך להיות חתוך.

מכיוון שמאפיין זה עדיין אינו נתמך בכל דפדפן, לא ניכנס לזה בפירוט.

ערכים של ברירת מחדל

ע"י ברירת מחדל החיתוך של אלמנט מסוים הוא auto.

האם זה עובר בירושה?

חיתוך אינו עובר בירושה. ואולם, באופן תיאורטי, החיתוך של הורה האלמנט המסוים יכול לגרום לאלמנט להיות חתוך.

רמזים והצעות

פשוט תתעלמו ממאפיין זה, עד שינחו אתכם אחרת.